
@import 'variables';

#RoomPanel {
	display: flex;
	justify-content: center;
	align-items: stretch;
	overflow-x: auto;

	@media (max-width: $phone-width) {
		justify-content: initial;
	}

	> .sub-panel {
		flex-basis: 500px;
		padding: 10px;

		@media (max-width: $phone-width) {
			min-width: 100%;
			flex: 0 0;
		}


		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.room-subject {
		position: relative;
		border-radius: 10px;

		&:hover {
			box-shadow: inset 0 0 10px 0 black;

			button { display: block; }
		}

		button {
			display: none;
			position: absolute;
			bottom: 0;
			right: 0;
			opacity: 0.5;
		}

		> .editor {
			padding: 10px;
		}
	}
}
